<template>
  <div class="ValBox">
    <div class="musicClassification">
      <span class="titOne">热门推荐</span>
      <div class="classificationBox">
        <span>华语</span>
        <span>|</span>
        <span>流行</span>
        <span>|</span>
        <span>摇滚</span>
        <span>|</span>
        <span>民谣</span>
        <span>|</span>
        <span>电子</span>
      </div>
      <div class="moreBox">更多</div>
    </div>
    <HotListDom
      :PopularRecommendationList="PopularRecommendationList"
      @clickPlay="clickPlay"
    />
    <div class="musicClassification">
      <span class="titOne">新碟上架</span>
      <div class="classificationBox"></div>
      <div class="moreBox">更多</div>
    </div>
    <DewDise
      :DewDiseList="DewDiseList"
      @NewDiscItemClick="NewDiscItemClick"
      @ItemPlay="NewDiscItemPlayClick"
    />
    <div class="musicClassification">
      <span class="titOne">榜单</span>
      <div class="classificationBox"></div>
      <div class="moreBox">更多</div>
    </div>
    <RecommendedList />
  </div>
</template>

<script>
import { personalized, NewDisc } from "@/api";
import HotListDom from "@/components/HotListDom";
import DewDise from "@/components/DewDise";
import RecommendedList from "@/components/RecommendedList";
export default {
  data: function () {
    return {
      PopularRecommendationList: [],
      DewDiseList: [],
    };
  },
  created() {
    this.getpersonalizedFn();
    this.getNewDiscDateFn();
  },
  components: {
    HotListDom,
    DewDise,
    RecommendedList,
  },
  methods: {
    getpersonalizedFn() {
      personalized({ limit: 8 }).then((res) => {
        this.PopularRecommendationList = res.result;
      });
    },
    getNewDiscDateFn() {
      let param = {
        limit: "15",
      };
      NewDisc(param).then((res) => {
        this.DewDiseList = [
          res.monthData,
          res.monthData.splice(10),
          res.monthData.splice(5),
        ];
        // console.log(9999, this.DewDiseList);
      });
    },
    clickPlay(date) {
      console.log("点击了歌单的播放按钮", date);
    },
    NewDiscItemClick(data) {
      console.log("点击了新碟上架item", data);
    },
    NewDiscItemPlayClick(data) {
      console.log("点击了新碟上架item的播放按钮", data);
    },
  },
};
</script>

<style lang="scss" scoped>
.musicClassification {
  height: 33px;
  padding: 0 10px 0 34px;
  background-position: -225px -156px;
  border-bottom: 2px solid #c10d0c;
  display: flex;
  background-image: url("./../../assets/imges/PopularRecommendationIcon.png");
  background-repeat: no-repeat;
}
.ValBox {
  padding: 20px 20px 40px;
}
.titOne {
  font-size: 20px;
  font-weight: normal;
  line-height: 28px;
}
.classificationBox {
  flex: 1;
  color: #666;
  font-size: 12px;
  margin: 7px 0 0 20px;
}
.classificationBox span {
  margin: 0 6px;
}
.moreBox {
  color: #666;
  font-size: 12px;
  margin-top: 7px;
  background-image: url("./../../assets/imges/PopularRecommendationIcon.png");
  background-repeat: no-repeat;
  background-position: 28px -237px;
  padding-right: 18px;
}
</style>